/**
 * 菜单 & 头部
 * @param $menu 左侧菜单
 * @constructor
 */
var App = function ($menu) {

    return new Vue({
        el: '#app',
        data: {
            loadOver: false, // 是否加载完毕
            collapse: false, // 是否关闭菜单
            userInfo: {}, // 用户信息
            menu: {
                setting: {
                    actColor: '#409EFF', // 活动字体颜色
                    actSdColor: '#20a0ff', // 活动阴影色,
                    NoActColor: '#bfcbd9', // 未活动字体颜色
                }, // 设置
                topList: [],  // 顶部菜单列表
                topIndex: '', // 顶部菜单 当前活动
                leftList: {}, // 左侧菜单列表
                leftWidth: 200,                             // 左侧菜单样式
                leftStyle: {},                              // 左侧菜单样式
                bottomStyle: {},                            // 底部内容，包括：左侧菜单、右侧内容
            },
            tab: {
                list: [],                                   // 标签列表
                activeIndex: null,                          // 当前活动标签
                indexKey: 'defaultIndex',                   // 首页[KEY]
                indexUrl: $w.getPageUrl('workBench'), // 首页[URL ]
                showLeftMore: false,                        // 标签左侧更多展示
                showRightMore: false,                       // 标签右侧更多展示
                tabWrapperWidth: 0,                         // [tab]标签外部宽度
                translateProgress: 0,                       // 当前滚动进度px
            },
            rightClickStyle: {}, // 右击展示菜单样式
            rightClickIndex: null, // 当前右击[index]
            openLoading: false, // 页面打开中
            pageDialog: {
                show: false,    // 页面 - 是否展示弹出层
                url: '',        // 页面 - 弹出层连接
                loading: false, // 页面 - 弹出层加载中
                isIframe: false // 页面 - 是否[iframe]嵌入
            },

        },
        created: function () {
            // 初始化用户
            this.initUser();
            // 初始化菜单
            this.initMenu();
            // 初始化[tab]
            this.initTab();
            var that = this;
            this.$nextTick(function () {
                that.loadOver = true;
                // that.initMainScroll();
            });
        },
        methods: {
            /**
             * 初始化某些样式
             */
            initCss: function () {
                var that = this;
                this.$nextTick(function () {
                    // ****** 下面计算下TAB选项卡高度 ******
                    // 公式：高度 - [tab]高度
                    var tabListObj = $('.tab-list');
                    var tabHeight = 0; // TODO:tabListObj.find('.el-tabs__header')[0].offsetHeight;
                    var mainHeight = $('#contentWrapper').height();
                    tabListObj.find('.el-tabs__content').css({
                        height: 'calc(' + mainHeight + 'px - ' + tabHeight + 'px)'
                    });

                    // ****** 下面计算底部内容 ******
                    // 底部内容高度
                    that.menu.bottomStyle = {
                        height: 'calc(100% - 30px - ' + $('#headerWrapper').height() + 'px)'
                    };
                    // 左侧菜单
                    that.menu.leftStyle = {
                        width: this.menu.leftWidth + 'px'
                    };
                });
            },
            /**
             * 初始化滚动条
             */
            initMainScroll: function () {
                var shadowDom = this.$refs['mainScrollShadow'];
                if (!shadowDom) return false;
                this.$refs.mainScroller.wrap.onscroll = function ($event) {
                    var opacity = 0;
                    opacity = $event['srcElement']['scrollTop'] / 100;
                    opacity = opacity > 0.6 ? 0.6 : opacity
                    shadowDom['$el']['style']['box-shadow'] = '0 5px 15px 0 rgb(204, 204, 204, ' + opacity + ')';
                };
            },
            /**
             * 初始化用户
             */
            initUser: function () {

                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('loginInfo'),
                    type: 'get',
                    data: {},
                    dataType: "json",
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        // 数据赋值
                        that.userInfo = event.data.userInfo;

                        return true;
                    }
                });
            },
            /**
             * 初始化左侧菜单
             */
            initMenu: function () {

                // 菜单[JSON]转[OBJ]
                $menu = JSON.parse($menu);
                // ******* 1、先初始化顶部菜单 *******
                this.$set(this.menu, 'topList', $w.dataNoBind($menu));

                //  ******* 2、先初始化左侧菜单 *******
                if ($menu[0] && $menu[0]['children'].length > 0) {
                    this.$set(this.menu, 'leftList', $w.dataNoBind($menu[0]['children']));
                }

                // ******* 3、赋值当前活动菜单等信息 *******
                // 以头部的[key]获取左侧菜单列表
                var actSub = this.menu.topList[this.menu.topIndex];

                if (actSub && actSub['children']) { // 有顶部的[children]就展示顶部的[children]
                    this.menu.leftList = this.menu.topList[this.menu.topIndex]['children'];
                } else {
                    // 顶部[sub]没有就展示第一个
                    var topKeys = Object.keys(this.menu.topList);
                    // 默认顶部活动第一个
                    this.menu.topIndex = topKeys[0];
                    // 左侧菜单列表
                    this.menu.leftList = !this.menu.topList[topKeys[0]] ?
                        [] : this.menu.topList[topKeys[0]]['children'];
                }
            },
            /**
             * 初始化选项卡的默认属性
             */
            initTab: function () {

                // 初始化已经打开标签列表
                var indexKey = this.tab.indexKey;
                this.$set(this.tab, 'list', {});

                this.tab.list[indexKey] = {
                    font_icon: "",
                    label: "首页",
                    key: indexKey,
                    url: this.tab.indexUrl,
                    levelList: []
                };
                // 当前活动[tab]标签
                this.$set(this.tab, 'activeIndex', indexKey);

                var that = this;
                this.$nextTick(function () {

                    // 添加事件 - 全部[DOM]点击触发 关闭右击菜单
                    that.initTabLeftMenu();

                    // 添加事件tab鼠标移入移出
                    that.initTabEvent();

                    // 添加事件 - [iframe]事件
                    var iframe = $("iframe");
                    iframe.load(function () {
                        // 里面登录按钮点击
                        iframe.contents().find('#toLogin').on('click', function () {
                            window.parent.location.href = $w.getPageUrl('login');
                        });
                    });

                    // 初始化[css]
                    that.initCss();
                });
            },
            /**
             * Tab选显卡事件
             */
            initTabEvent: function () {

                var hoverClass = 'hover-active',
                    hoverNextClass = 'hover-next-active',
                    hoverPrevClass = 'hover-prev-active';
                // 鼠标移入
                $(document).on('mouseover', '.tab-item', function ($event) {
                    // 自身
                    $($event['currentTarget']).addClass(hoverClass);
                    // 上一个
                    $($event['currentTarget']).prev().addClass(hoverPrevClass);
                    // 下一个
                    $($event['currentTarget']).next().addClass(hoverNextClass);
                });
                // 鼠标移出
                $(document).on('mouseout', '.tab-item', function ($event) {
                    $($event['currentTarget']).removeClass(hoverClass);
                    // 上一个
                    $($event['currentTarget']).prev().removeClass(hoverPrevClass);
                    // 下一个
                    $($event['currentTarget']).next().removeClass(hoverNextClass);
                });
            },
            /**
             * 初始化右击菜单
             */
            initTabLeftMenu: function () {

                var that = this;
                this.$nextTick(function () {

                    // 添加事件 - 全部[DOM]点击触发 关闭右击菜单
                    $(window).mouseup(function (e) {
                        var con = $('#leftMenuWrapper');   // 设置目标区域
                        // 其他点击可取消
                        if (!con.is(e.target) && con.has(e.target).length === 0) {
                            that.hideLeftMenu();
                        }
                    });

                    // 添加事件 - [iframe]点击触发 关闭右击菜单
                    var iframe = $("iframe");
                    if (iframe.size() === 1) {
                        $(iframe.prop('contentWindow')).on('click', that.hideLeftMenu);
                    } else {
                        for (var i = 0; i < iframe.size(); i++) {
                            $($(iframe[i]).prop('contentWindow')).on('click', that.hideLeftMenu);
                        }
                    }
                });
            },
            /**
             * 菜单整体 缩小按钮操作
             */
            openColMenu: function () {

                var that = this;
                var contentObj = jQuery('#contentWrapper'),
                    menuSideObj = jQuery('#menuSide');
                // 展开
                if (this.collapse === true) {

                    // 内容
                    contentObj.removeClass('animate-tab-collapse-out');
                    // 内容
                    contentObj.addClass('animate-tab-collapse-in');

                    // 菜单
                    menuSideObj.removeClass('animate-menu-collapse-close');
                    // 菜单
                    menuSideObj.addClass('animate-menu-collapse-open');

                    // 菜单 宽度
                    this.$nextTick(function () {
                        // 展开
                        that.collapse = false;
                        that.menu.leftStyle.width = 200 + 'px';
                    });
                } else {
                    // 内容
                    contentObj.removeClass('animate-tab-collapse-in');
                    // 内容
                    contentObj.addClass('animate-tab-collapse-out');

                    // 菜单
                    menuSideObj.removeClass('animate-menu-collapse-open');
                    // 菜单
                    menuSideObj.addClass('animate-menu-collapse-close');

                    // 菜单 宽度
                    this.$nextTick(function () {
                        // 收缩
                        that.collapse = true;
                        that.menu.leftStyle.width = 'auto';
                    });
                }
            },
            /**
             * 获取样式
             */
            getStyleIcon: function ($key) {

                // 如果是当前菜单的INDEX == 传输KEY
                if (this.tab.activeIndex === $key) {

                    return {
                        color: this.menu.setting.actColor
                    };
                }
                return {
                    color: this.menu.setting.NoActColor
                };
            },
            /**
             * [顶部标签]点击
             */
            topTabClick: function ($index) {

                // [index]长度太小
                if ($index.length < 1) return false;
                this.$set(this.menu, 'topIndex', $index);
            },
            /**
             * 左侧菜单 点击跳转链接
             * @param $item
             * @param $parent
             * @returns {boolean}
             */
            leftMenuLink: function ($item, $parent) {

                console.log($item);
                // 打开加载中
                this.openLoading = true;

                // 查询选项卡列表里是没有的话得添加
                if (!this.tab.list[$item['key']]) {
                    this.addTab($item);
                    // 关闭加载中
                    return this.closeLoading($item);
                }

                // 要跳转打开连接等于 当前活动连接则不进行任何操作
                // 活动tab信息
                var actItem = this.tab.list[this.tab.activeIndex];
                if ($item['key'] === actItem['key']) return this.closeLoading($item);

                // 当前活动选项卡
                this.tab.activeIndex = $item['id'];

                // 退出动画
                this.outAnimate();
                var that = this;
                this.$nextTick(function () {

                    that.$set(that, 'tab.activeIndex', $item['key']);
                    // 关闭加载中
                    that.closeLoading($item);
                });
            },
            /**
             * 是否可以展示tab选项卡
             * @param $key 当前tab键
             */
            isShowTabItem: function ($key) {
                return $key === this.tab.activeIndex;
            },
            /**
             * 获取tab条目样式
             * @param $key 当前tab键
             */
            getTabItemClass: function ($key) {
                var classList = ['tab-' + $key];
                if ($key === this.tab.activeIndex) classList.push('is-active');
                // 当前打开tab上一个样式
                if (this.activePrevTabKey === $key) classList.push('active-prev');

                return classList.join(' ');
            },
            /**
             * 顶部标签选项卡 增加
             * @param $item 选项卡条目详情
             */
            addTab: function ($item) {

                // 当前条目存进已打开选项卡列表
                this.$set(this.tab.list, $item['key'], $item);
                // 打开 - 必须分开
                this.tabSelected($item['key']);
                // 在初始化一下右击菜单
                this.initTabLeftMenu();
            },
            /**
             * 打开选项卡
             * @param $key
             * @param $force 是否强制
             * @returns {boolean}
             */
            tabSelected: function ($key, $force) {

                // 如果当前活动 index 不操作
                if (this.tab.activeIndex === $key && !$force) return false;

                // 检测是否存在此键值
                if (!this.tab.list[$key]) return false;

                // 顶部选项卡切换
                var topId = this.tab.list[$key]['top_id'];
                if (topId !== this.tab.indexKey && topId) {
                    this.$set(this.menu, 'topIndex', topId);
                }

                var that = this;
                this.$nextTick(function () {

                    that.$set(that.tab, 'activeIndex', $key);
                    // 添加事件 - [iframe]点击触发
                    var iframeObj = jQuery("iframe");
                    if (iframeObj[0] && iframeObj[0].contentWindow) {
                    } else {
                        iframeObj.load(function () {
                            // 按钮点击去登录
                            iframeObj.contents().find('#toLogin').on('click', function () {
                                window.parent.location.href = $w.getPageUrl('login');
                            });
                        });
                    }
                });
            },
            /**
             * 打开除[当前选项卡]外其他选项卡
             * @param $doIndex 操作[key]|值空则当前活动标签[key]作为操作[key]
             * @returns {string}
             */
            openOtherTab: function ($doIndex) {

                this.$set(this.tab, 'activeIndex', '');
                $doIndex = $doIndex || this.tab.activeIndex;

                var noStageData = $w.dataNoBind(this.tab.list);
                var arrayNext = $w.array_next_val($doIndex, noStageData);

                // 判断如果当前活动的[index]不存在 [tab]列表中，则[tabs]中最后一个打开
                if (!arrayNext) {

                    // 当前活动[TAB] - 最后一个
                    var stage = $w.array_end(noStageData);
                    this.$set(this.tab, 'activeIndex', stage['key']);
                    return true;
                }

                this.$set(this.tab, 'activeIndex', arrayNext['key']);
            },
            /**
             * 关闭选项卡
             * @param $key
             */
            closeTab: function ($key) {

                // 判断下 如果要关闭的是Index 则不关闭
                var doItem = this.tab.list[$key];
                if (doItem && doItem['key'] === this.tab.indexKey) {
                    // 消息
                    return this.$message({
                        showClose: true,
                        type: 'warning',
                        message: '首页是无法关闭哦~≡ω≡'
                    });
                }

                // 删除 = 关闭
                this.$delete(this.tab.list, $key);
                // 当前活动[$key]是要关闭的[$key] - 去执行打开其他标签
                if ($key === this.tab.activeIndex) this.openOtherTab($key);

                var that = this;
                this.$nextTick(function () {
                    // 调用下选择选项卡
                    that.tabSelected(that.tab.activeIndex, true);
                });
            },
            /**
             * [选项卡]点击检测是否驳回选项卡切换
             * @param $activeName
             * @param $oldActiveName
             * @returns {boolean}
             */
            isReject: function ($activeName, $oldActiveName) {

                $activeName = $activeName.key || $activeName;

                $oldActiveName = $oldActiveName || this.tab.activeIndex;

                // 取出连接
                var link = this.tab.list[$activeName];
                // [tab]信息未找到
                if (!link) return false;

                var topId = link['top_id'];

                // 顶部活动[MENU]赋值|0是顶部 - 存在的话赋值
                if (topId !== this.tab.indexKey && topId) {
                    this.$set(this.menu, 'topIndex', topId);
                }

                // 先判断链接等于当前活动的链接就不跳转
                if (link['key'] === $oldActiveName) return false;

                // 如果当前活动[tab index]不是当前点击赋值
                if (this.tab.activeIndex !== $activeName) {
                    this.tab.activeIndex = $activeName;
                }

                this.inAnimate();
                return true;
            },
            /**
             * 选项卡 操作|包括关闭、添加
             */
            handleTabsEdit: function (targetName, action) {

                if (action === 'remove') {
                    this.closeTab(targetName.toString());
                }
            },
            /**
             * 执行一次进入、退出动画
             */
            outInAnimate: function ($item) {

                var that = this;
                this.outAnimate();
                // setTimeout(function () {
                //     that.inAnimate();
                // }, 980);
            },
            /**
             * 页面进入动画
             */
            inAnimate: function () {

                // 进入class - [fadeInLeftBig animated infinite]
                // 离开class - [fadeOutRight animated infinite]

                var that = this;
                var contAniObj = $('.el-tabs__content');
                contAniObj.addClass('animate-opacity-in animated infinite');
                // 几秒之后移除
                setTimeout(function () {
                    contAniObj.removeClass('animate-opacity-in animated infinite');
                    // contAniObj.removeClass('fadeOutRight');
                }, 1000);
            },
            /**
             * 页面进入动画
             */
            outAnimate: function () {

                // 进入class - [fadeInLeftBig animated infinite]
                // 离开class - [fadeOutRight animated infinite]

                var contAniObj = $('.el-tabs__content');
                // contAniObj.addClass('animate-opacity-out animated infinite');
                // 几秒之后移除
                var that = this;
                setTimeout(function () {
                    contAniObj.removeClass('animate-opacity-out animated infinite');
                    // contAniObj.removeClass('fadeOutRight');
                    that.inAnimate();
                }, 1500);
            },
            /**
             * 菜单右击
             * @param event
             * @param key
             */
            showRightMenu: function (event, key) {

                // 如果右击的不是[tab]列表
                if (!jQuery(event['currentTarget'])) return false;

                var pattern = new RegExp("tab\-");
                this.rightClickIndex = jQuery(event['currentTarget']).attr('id').replace(pattern, '');

                // 获取下 pos 位置
                event.preventDefault();

                this.$set(this, 'rightClickStyle', {
                    top: event.clientY + 'px',
                    left: event.clientX + 'px',
                    display: 'block'
                });

                this.tabSelected(key);
            },
            /**
             * 隐藏右击菜单
             */
            hideLeftMenu: function () {
                this.$set(this.rightClickStyle, 'display', 'none');
            },
            /**
             * 刷新当前选项卡和链接
             */
            reloadTab: function () {
                var actKey = this.tab.list[this.rightClickIndex];
                if (!actKey) {

                    this.hideLeftMenu();
                    return false;
                }

                this.$set(this.tab.list[this.rightClickIndex], 'url',
                    actKey['url'] + '?a=' + Math.random(0.001, 0.9));

                // 最后隐藏一下菜单
                this.hideLeftMenu();
            },
            /**
             * 浏览器新标签打开此选项卡
             */
            openTabNewTab: function () {
                var nowItem = this.tab.list[this.rightClickIndex];
                window.open(nowItem['url'], '_blank').location;
                // 关闭菜单
                this.hideLeftMenu();
            },
            /**
             * 关闭其他选项卡
             */
            closeOtherTabs: function () {

                // 如果打开不是首页
                if (this.rightClickIndex !== this.tab.indexKey) {

                    var activeTab = $w.dataNoBind(this.tab.list[this.rightClickIndex]);
                    // 初始化下选项卡
                    this.initTab();
                    this.tab.list[activeTab['key']] = activeTab;
                    // 活动选项卡为其[key]
                    this.$set(this.tab, 'activeIndex', activeTab['key']);
                    // 关闭菜单
                    return this.hideLeftMenu();
                }

                // ****** 下面走打开的是首页逻辑 ******
                // 初始化下选项卡
                this.initTab();
                // 关闭菜单
                this.hideLeftMenu();
            },
            /**
             * 右击菜单 - 关闭当前选项卡
             */
            closeTabLeftMenu: function () {
                // index 转下数字
                var index = this.rightClickIndex;
                this.closeTab(index);
                // 关闭菜单
                this.hideLeftMenu();

            },
            /**
             * 关闭右侧全部选项卡
             */
            closeRightAll: function () {

                var item,
                    startClose = false,
                    route = $w.dataNoBind(this.tab.list[this.rightClickIndex]['url']),
                    stageTabList = $w.dataNoBind(this.tab.list);

                this.initTab();
                for (var i in stageTabList) {

                    if (!stageTabList.hasOwnProperty(i)) continue;
                    item = stageTabList[i];

                    // 开关打开了，以后的[TAB]都关闭 - 不要了
                    if (startClose) break;

                    // 因为自身不能关闭 - 做一个开关监测吧
                    if (item['url'] === route) startClose = true;

                    this.$set(this.tab.list, item['key'], item);
                }

                // 当前活动KEY
                this.$set(this.tab, 'activeIndex', $w.array_end(this.tab.list)['key']);
                // 关闭菜单
                this.hideLeftMenu();
            },
            /**
             * 关闭左侧全部
             */
            closeLeftAll: function () {

                var item,
                    startClose = false,
                    route = $w.dataNoBind(this.tab.list[this.rightClickIndex]['url']),
                    stageTabList = $w.dataNoBind(this.tab.list);

                this.initTab();
                for (var i in stageTabList) {

                    if (!stageTabList.hasOwnProperty(i)) continue;
                    item = stageTabList[i];

                    // 因为自身不能关闭 - 做一个开关监测吧
                    if (item['url'] === route) startClose = true;

                    // 开关打开了，以后的[TAB]都留下
                    if (!startClose && this.tab.indexKey !== item['key']) continue;

                    this.$set(this.tab.list, item['key'], item);
                }

                // 当前活动KEY - 是右击的[key]
                this.$set(this.tab, 'activeIndex', this.rightClickIndex);
                // 关闭菜单
                this.hideLeftMenu();
            },
            /**
             * 退出登录
             */
            loginOut: function () {

                // 正在加载。。
                var loadingInstance = ELEMENT.Loading.service({
                    fullscreen: false,
                    text: '正在退出...',
                    customClass: 'z-index-top'
                });

                var that = this;

                // 获取各模块的值
                $w.request({
                    url: $w.getApiUrl('logout'),
                    type: 'POST',
                    data: {},
                    dataType: "json",
                    beforeCallback: function () {
                        that.$nextTick(function () {
                            // 隐藏正在加载
                            loadingInstance.close();
                        });
                    },
                    callback: function (event) {

                        // 失败的返回|提示
                        if (parseInt(event.no) !== 200) {

                            return that.$message({
                                showClose: true,
                                type: 'error',
                                message: event.msg ? event.msg : '操作失败，请稍后尝试'
                            });
                        }

                        that.$message({
                            showClose: true,
                            type: 'success',
                            message: '退出成功'
                        });
                        // 成功 加载下列表
                        return that.$nextTick(function () {
                            window.location.href = $w.getPageUrl('login');
                        });
                    }
                });
            },
            /**
             * 清除全部缓存 展示
             */
            clearAllCache: function () {
                // 取出[ref]对象
                var cacheCache = this.$refs['clearCache'];
                cacheCache.showDialog = true;
            },
            /**
             * 获取菜单[class]
             * @param $key
             * @returns {string}
             */
            getMenuItemCss: function ($key) {
                return $key === this.tab.activeIndex ? 'is-active' : '';
            },
            /**
             * 去登录页面
             */
            goToLogin: function () {
                window.location.href = $w.getPageUrl('login', {
                    showHint: 1
                });
            },
            /**
             * 左侧更多点击
             */
            leftMoreClick: function () {
                this.tab.translateProgress = this.tab.translateProgress + this.tab.tabWrapperWidth;
                if (this.tab.translateProgress <= this.tab.tabItemsWidth) {
                    this.tab.translateProgress = 0;
                }
                var tabWrapper = $('#tabWrapper > .tab-list > .tab-list-view');
                tabWrapper.css({transform: 'translateX('+this.tab.translateProgress+'px)'});
            },
            /**
             * 右侧更多点击
             */
            rightMoreClick: function () {
                this.tab.translateProgress = this.tab.translateProgress - this.tab.tabWrapperWidth;
                if ((this.tab.translateProgress - this.tab.tabWrapperWidth) <= -this.tab.tabItemsWidth) {
                    this.tab.translateProgress = -this.tab.tabItemsWidth;
                }
                var tabWrapper = $('#tabWrapper > .tab-list > .tab-list-view');
                tabWrapper.css({transform: 'translateX('+this.tab.translateProgress+'px)'});
            },
            /**
             * 关闭加载中
             * @param $item
             */
            closeLoading: function ($item) {

                var that = this;
                this.$nextTick(function () {

                    // 当前[iframe]
                    var iframeObj = jQuery("#iframe_" + $item['key']);
                    // 左侧活动菜单、当前活动[tab]赋值
                    if ($item['key'] && iframeObj[0] && iframeObj[0].contentWindow) {
                        setTimeout(function () {
                            // 打开加载中 - 否
                            that.openLoading = false;
                        }, 980);
                    } else {
                        iframeObj.load(function () {
                            // 打开加载中 - 否
                            that.openLoading = false;
                        });
                    }
                });
            }
        },
        watch: {
            /**
             * 监测顶部菜单[Menu Index]
             */
            'menu.topIndex': function ($val) {

                if (!this.menu.topList[$val]) {

                    this.$set(this.menu, 'leftList', []);
                    return false;
                }

                var mList = $w.dataNoBind(this.menu.topList[$val]['children']);
                this.$set(this.menu, 'leftList', mList);
                return false;
            },
            /**
             * 监测tab列表值
             */
            'tab.list': function () {
                this.$nextTick(function () {
                    var tabWrapper = $('#tabWrapper > .tab-list');
                    var tabView = tabWrapper.find('.tab-list-view');
                    tabView.css({transform: 'translateX(0px)'});
                    this.tab.tabWrapperWidth = tabView.width();
                    var tabItems = tabView.find('.tab-item');
                    var tabItemsWidth = 0;
                    for (var i in tabItems) {
                        if (!tabItems.hasOwnProperty(i)) continue;
                        tabItemsWidth += $(tabItems).eq(i).width();
                    }
                    if (this.tab.tabWrapperWidth < tabItemsWidth) {
                        this.tab.showLeftMore = true;
                        this.tab.showRightMore = true;
                    }
                    this.tab.tabItemsWidth = tabItemsWidth;
                });
            }
        },
        computed: {
            /**
             * 当前活动tab的下一个index
             */
            activeNextTabKey: function () {
                var value = $w.array_next_val(this.tab.activeIndex, this.tab.list);
                return value['key'] ? value['key'] : false;
            },
            /**
             * 当前活动tab的上一个index
             */
            activePrevTabKey: function () {
                var value = $w.array_prev_val(this.tab.activeIndex, this.tab.list);
                return value['key'] ? value['key'] : false;
            },
            // /**
            //  * 当前tab列表第一个Key
            //  */
            // firstTabKey: function () {
            //     var value = Object.keys(this.tab.list)[0]['key'];
            //     return value['key'] ? value['key'] : false;
            // },
            // /**
            //  * 当前tab列表最后一个Key
            //  */
            // lastTabKey: function () {
            //     var keys = Object.keys(this.tab.list);
            //     return keys && keys[keys.length + 1] && keys[keys.length + 1]['key'] ?
            //         keys[keys.length + 1]['key'] : false;
            // }
        }
    });
};
